<template>
  <div class="trade-page">
    <div class="floor trade-floor">
      <div class="inner-content flex-hor-layout">

        <div class="tradeview-and-tables-column">
          <div class="tradeview-item pos-rel">
            <div class="pos-abs board-outter-wrap">
              <Board></Board>
            </div>
            <div class="tradeview-outter-wrap">
              <!-- <TradeView></TradeView> -->
              <chart></chart>
            </div>
            
          </div>
        </div>

        <div class="freight-and-tradeops-column">
          <div class="trade-ops-outter-wrap">
            <TradeOps></TradeOps>
          </div>
          <div class="storage-status-outter-wrap">
            <StorageStatus></StorageStatus>
          </div>
          <div v-if=false class="storage-dynamic-outter-wrap">
            <StorageDynamic></StorageDynamic>
          </div>
          <div class="account-outter-wrap">
            <Account></Account>
          </div>
        </div>

      </div>
    </div>
    
    <div class="floor">
      <div class="inner-content tables-outter-wrap">
        <tables></tables>
      </div>
    </div>

  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import clip from '@/utils/clipboard' // use clipboard directly
  import clipboard from '@/directive/clipboard/index.js' // use clipboard by v-directive
  import Board from './components/board/board.vue'
  import TradeView from './components/tradeview/tradeview.vue'
  import chart from '../echarts/index'
  import tables from './components/tables'

  import TradeOps from './components/tradeOps/index.vue'
  import StorageStatus from './components/storageStatus/storageStatus.vue'
  import StorageDynamic from './components/storageDynamic/storageDynamic.vue'
  import Account from './components/account/account.vue'
  export default {
    name: 'Trade',
    components: {
      Board,
      TradeView,
      chart,
      tables,
      StorageStatus,
      StorageDynamic,
      TradeOps,
      Account
    },
    directives: {
    },
    filters: {

    },
    data() {
      return {

      }
    },
    computed: {
      ...mapGetters([])
    },
    watch: {},
    created() {

    },
    mounted() {
    },
    methods: {

    }
  }
</script>
<style lang="scss" scoped>
  @import "./index.scss";
</style>
